Overview and Motivation

Enjoying watching the European soccer league games, we want to visualize data about soccer to show the trend of soccer’s development. Since there have been many research about the outcome of games, we decide to exploring our data from another perspective: the transfer market which reflects not only the loyalty of players in a team but also the development of leagues or teams. Our topic is the European league soccer transfer, containing two levels, which are league and team, and two perspectives, which are the number of transfer players and the amount of money has been spent.

Appreciating to the visuliazation class, we have learnt not only technical method but also many concepts and criterias of visualization. Based on the concept “overview plus detail”, we build our visulization in two views, intuitive insight of the data set and more accurate qualitative details.

Question

The following questions have been answered on both league level and team level:

The following questinos have been answered on team level:

Data

Our data comes from Kaggle European Soccer Database, and the link is .

The data set contains 11 European league, more than 25000 matches and at least 10000 players from season 2008 to season 2016.

The form of data set is several tables in sqlite database, so we plan to join the tables to get which player belongs to which team from year to year, then we can know the trasfer of players.

Exploratory Data Analysis

Design Evolution

Initial design

Our initial design contains three charts: a chord diagram, a force direct diagram, and a line chart. We choice chord diagram to show transfer relations between leagues, since this diagram is concise and space savin, comparing to our another design where a league column has been doubled and lines are drawn between two columns such like links between levels in neural Networks. The scale is added outside the circle to avoid the quantitative shortage of the circle.

According to class vertices and edges can show relationships, the force direct diagram has been chosen to express the transfer relationship between teams. We plan to zoom in a team to show the name and the transfer numbers of that team, which is discarded in our final according to TAs’ suggestion and more function has been added in this chart which will be introduced latter.

We plan to use a line chart to show the trend of players transfer for each league.A line stands for the number of players who transfer into this league and another line is the increasment of the number of players in each league, which comes from substracting transfer-out players from transfer-in players. The distance beween two line represent the the number of players who transfer out from this league. In final design, we add an aculmulative line chart in reference to the website of baby name shown in class when two or more leagues have been choiced. Moreover, in order to better reflect the mobility of players, we use sum of the number of player transfered in plus transfered out as the upper line and the number of player transfered in as the lower line, and the number of player transfered out can be read by the distance of two lines.

Additionaly, we plan to add year brush to facilitate choicing a year or a period containing multiple years, and add logos of leagues help us choice a league easierly. These designs are both applied in our final design.

We have two optional charts. One is a table which show the top ten players who has the most number of transfer times and the other is a map which show the transfer trace of a player selected from the table. The optional charts are not included in the final design, since we decided focus on the transfer in leagues and teams level and based on the TA’s suggestino adding the money information is more useful than our optional designs.

Our initial design can be seen in Figure 1 and Figure 2.

Page 1 of our initial design

Page 1 of our initial design

Page 2 of our initial design

Page 2 of our initial design

Version 1

We applied our design as Figure 3 and Figure 4. The chord diagram is following our original idea. The number of transfered players can be read from the scale outside the circle as well as the tooltip. When mouseover, the link become highlight and other links become light grey. As to force direct diagram, we can get the transfer relation of teams not only within a league but also among different leagues.

In this version, we can either moseover the edges or select the arc of multiple leagues from diagram 1 to filter out the teams in corresponding leagues for diagram 2, and the selected teams are distinguished by highlighting the vertices and edges of these these teams and making other teams become translucent. However, as we can see, the force direct diagram looks pertty messy. Too many teams (around 200 teams) interfering with the transfer relationships of the teams we want to inspect.

Version 1 page 1

Version 1 page 1

Version 1 page 2

Version 1 page 2

Version 2

As shown in figure 5, the problem mentioned above has been solved by adding team selecting mechanism which can filt out teams either has been selected or has direct transfer relationship with the selected team.

Besides color changes, add league’s name, and adding more interaction with other charts, there is no change in chord diagram from initial design. The line chart with all leagues and with selected leagues are shown in Figure 6. The sum of the number of transfer-in and transfer-out has been used here, we can see the trend of the number of transfer players of leagues. There two aspect can be improved. First, since the line has been acculmulated, the value of the upper line is affacted by the value of the lower line which may lead reading errors. Sencondly, besides the sum of the number of transfer players, we may want to know the trend of the number of the player transfered in and out respectively. In order to solve these problem, in later version we add both overlay for transfer-out to distinguish it from transfer in and values for boundaries of the overlay, which means the number of player transferd out and transfered in respectively.

Version 2 page 1

Version 2 page 1

Version 2 page 2 with all leagues

Version 2 page 2 with all leagues

Implementation

intent and functionality

The logos region shown in Figure 7 aims at selecting leagues and teams. The short ribbon under the each of the leaguer logo represents the color for that league and the long ribbon under a line of team logos indicates which league these teams belong to.

The logos region

The logos region

The player transfer are shown in two perspectives, the number of players transfered and the amount of money spent.

In the following description, we take the player version as the example. The chord diagram shows the player transfer between leagues. As shown in Figure , a curve bewteen two leagues stands for the player transfer between these leagues and the thickness of the curve is propotional to the number of players transferd out from the league. The selected leagues or selected teams are highlight by making irrelevant curves become transparent. We can get approximate number by reading the scale outside the circle and the precise number by reading from tooltips when mouseover.

Chord diagram with tooltip

Chord diagram with tooltip

Interaction

We pay many efforts in interaction which we think can evoke people’s intresest in exploring data. In our project, all chart are correlative, which means leagues or teams can be selected in any chart and the related information will be filtered out in other chart.

Evaluation

Interaction: every chart can ineract with each other.

Conclusion

Reference